<template>
  <el-container>
    <el-aside width="250px"><v-sidebar /></el-aside>
    <el-container>
      <el-header><v-header /></el-header>
      <el-main>
        <v-tags />
        <div class="content">
          <router-view v-slot="{ Component }">
            <transition name="move" mode="out-in">
              <keep-alive :include="tags.nameList">
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </div>
      </el-main>
      <el-footer><v-footer /></el-footer>
    </el-container>
  </el-container>
</template>

<script setup>
import { useSidebarStore } from '../stores/sidebar'
import { useTagsStore } from '../stores/tags'
import vHeader from '../components/Header.vue'
import vSidebar from '../components/Asidebar.vue'
import vTags from '../components/Tags.vue'
import vFooter from '../components/Footer.vue'

const sidebar = useSidebarStore();
const tags = useTagsStore();
</script>

<style lang="less" scoped>
.el-header {
  --el-header-padding: 0;
}

.content {
  padding: 20px;
  background-color: #f3f3f4;
}

.el-footer {
  background-color: #ffffff;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.1);
}
</style>
